<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Facebook Connect</title>
<link rel="shortcut icon" type="image/x-icon" href="http://www.bad-coder.appspot.com/static/favicon.ico">
<!-- <link href='http://fonts.googleapis.com/css?family=Tangerine'
	rel='stylesheet' type='text/css'> -->

<!--[if lte IE 6]>
		<h3 style="font-family: 'Trebuchet MS'; color: #FF6347;"align="left">Your Browser Is Not Supported!</h3>
		<h5 align="left" style="font-family: 'Trebuchet MS'; color: #3B6EBF;"> Please upgrade your browser.</h5>
		<![endif]-->
<!--
		@author: Navaneet Sarma
		-->
		<!--[if gte IE 6]>
<style type="text/css">
	.selectedimg {
	 height: 109px;
	width: 142px;}
</style>
<![endif]-->
<style>
.button {
	display: block;
	width: 70px;
	height: 30px;
	text-align: center;
	margin-bottom: 5px;
	/* background: #00b6ff; bluish tint*/
	background: orange;
	border: 1px solid orange;
	color: White;
	margin-left: 4px;
	margin-bottom: 8px;
}

.border { 
	/*border: 2px solid orange;*/
	/* 1st 2 for vertcal and horizontal offset and third is for blur amount and fourth is for amount of shadow radius */
	/*box-shadow: 5px 5px 3px 1px #ccc;*/
	-o-box-shadow: 4px 4px 4px #aaa;
	-icab-box-shadow: 4px 4px 4px #aaa;
	-khtml-box-shadow: 4px 4px 4px #aaa;
	-moz-box-shadow: 4px 4px 4px #aaa;
	-webkit-box-shadow: 4px 4px 4px #aaa;
	box-shadow: 4px 4px 4px #aaa;
	/* making round corners */
	-o-border-radius: 5px;
	-icab-border-radius: 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	/******hover and frame*****/
	padding: 5px;
    border: 1px solid #dddddd;
	background-color: white;
	margin: 22px;
	-webkit-transition: margin 0.2s ease-out;
	-moz-transition: margin 0.2s ease-out;
	-o-transition: margin 0.2s ease-out; 
	/***float:left alternative***/
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: top;
	zoom: 1;
	*display: inline;
	_height: 100px;
	/*float: left;*/
	behavior: url(/PIE.htc);
	/*vertical-align: bottom;*/
	/* -webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-o-transform: scale(0.9); */
}

.border:hover {

 margin-top: 0px;
 margin-bottom: 44px;
/* -webkit-box-shadow: 4px 4px 4px #00b6ff; */

 	/* -webkit-transition: -webkit-transform .15s linear; */
	/* http://lordhtml.blogspot.in/2012/06/add-zoom-hover-effect-to-blogger-images.html */
    /* -webkit-transform: scale(1.25);
	-moz-transform: scale(1.25);
	-o-transform: scale(1.25); */ 
/* opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */ */
	/*  position:relative;
	z-index: 5; */
	
/* http://www.w3schools.com/Css/css_positioning.asp */
/* position: relative;
top: -30px; */

	 
	
	
}

p {
	margin-top: 20px;
	font-size: 22px;
	/*font-family: 'Tangerine', cursive; */
	text-shadow: 4px 4px 4px #aaa;
	/* color: green; */
	/*font-weight: bold;*/
}

.selectedimg { /* height: 10%;
	width: 10%; */
	-o-box-shadow: 4px 4px 4px #aaa;
	-icab-box-shadow: 4px 4px 4px #aaa;
	-khtml-box-shadow: 4px 4px 4px #aaa;
	-moz-box-shadow: 4px 4px 4px #aaa;
	-webkit-box-shadow: 4px 4px 4px #aaa;
	box-shadow: 4px 4px 4px #aaa;
	/* making round corners */
	-o-border-radius: 5px;
	-icab-border-radius: 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	/******hover and frame*****/
	padding: 5px;
	border: 1px solid #dddddd;
	background-color: white;
	/*************************/
	behavior: url(/PIE.htc);
}

</style>


</head>
<body>
	<div id="fb-root"></div>
	<script type="text/javascript"
		src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
	<script type="text/javascript">
		jQuery(document)
				.ready(
						function() {
							var button;
							var userInfo;
							var flag = true;
							var id;
							function init() {
								FB
										.init({
											appId : '283827085065795',
											channelUrl : '//www.bad-coder.appspot.com/channel.html',
											status : true,
											cookie : true,
											xfbml : true,
											oauth : true
										});

								showLoader(false);

								function updateButton(response) {
									button = document.getElementById('fb-auth');
									userInfo = document
											.getElementById('user-info');

									if (response.authResponse) {
										//user is already logged in and connected
										FB.api('/me', function(info) {
											login(response, info);
										});

										button.onclick = function() {
											FB.logout(function(response) {
												logout(response);
											});
										};
									} else {
										//user is not connected to your app or logged out
										button.innerHTML = 'Login';
										button.onclick = function() {
											showLoader(true);
											FB.login(function(response) {
												if (response.authResponse) {
													FB.api('/me',
															function(info) {
																login(response,
																		info);
															});
												} else {
													//user cancelled login or did not grant authorization
													showLoader(false);
												}
											}, {
												scope : 'user_photos'
											});
										};
									}
								}

								//XXXXXXXXXXXXXXXXXx
								function login(response, info) {

									if (flag) {
										if (response.authResponse) {
											document.getElementById('upload').style.display = "block";
											document.getElementById('upload').onclick = upload;

											id = info.id;

											var userimage = document
													.createElement('img');
											userimage.src = "";
											userimage.alt = "";
											userimage.id = id;
											userimage.style.display = "none";
											userimage.className = "selectedimg";

											var username = document
													.createElement('p');
											username.innerHTML = "Hi "
													+ info.name
													+ ", Please select an image to upload";

											document
													.getElementById('user-info')
													.appendChild(userimage);
											document
													.getElementById('user-info')
													.appendChild(username);

											button.innerHTML = 'Logout';
											showLoader(false);
											//?????????????????????????????????????????????????????????????????????
											FB
													.api(
															'/me/picture?type=large',
															function(response) {
																var profile = response.data;
																var image = document
																		.createElement('img');
																image.src = profile.url;
																image.alt = profile.url;
																document
																		.getElementById(
																				'photos')
																		.appendChild(
																				image);
																image.className = "border";

																image.onclick = function() {
																	var selectedimg = document
																			.getElementById(info.id);
																	selectedimg.src = this.src;
																	selectedimg.alt = this.alt;
																	selectedimg.style.display = "block";

																};

															});//fb.api

											//**********************************************************************

											FB
													.api(
															'/me/albums?fields=id,name&limit=0',
															function(response) {

																for ( var i = 0; i < response.data.length; i++) {
																	var album = response.data[i];

																	FB
																			.api(
																					'/'
																							+ album.id
																							+ '/photos&limit=0',
																					function(
																							photos) {
																						if (photos
																								&& photos.data
																								&& photos.data.length) {

																							for ( var j = 0; j < photos.data.length; j++) {

																								var photo = photos.data[j];
																								// photo.picture contain the link to picture
																								//use source instead of picture if possible
																								var image = document
																										.createElement('img');
																								image.src = photo.picture;
																								image.alt = photo.source;
																								//document.body.appendChild(image);

																								document
																										.getElementById(
																												'photos')
																										.appendChild(
																												image);
																								image.className = "border";

																								image.onclick = function() {
																									var selectedimg = document
																											.getElementById(info.id);
																									selectedimg.src = this.src;
																									selectedimg.alt = this.alt;
																									selectedimg.style.display = "block";

																								};

																							}//for

																						}//if
																					});

																}
															});

											flag = false;

										}
									}

								}

								// run once with current status and whenever the status changes
								FB.getLoginStatus(updateButton);
								FB.Event.subscribe('auth.statusChange',
										updateButton);
							}
							;
							(function() {
								var e = document.createElement('script');
								e.async = true;
								e.src = document.location.protocol
										+ '//connect.facebook.net/en_US/all.js';
								document.getElementById('fb-root').appendChild(
										e);
							}());

							//XXXXXXXXXXXXXXXx
							if (window.FB) {
								init();
							} else {
								window.fbAsyncInit = init;
							}
							//XXXXXXXXXXXXXXXX

							//XXXXXXXXXXXXXXXXXXXXXX
							//window.location.reload();
							function logout(response) {
								document.getElementById('upload').style.display = "none";
								userInfo.innerHTML = "";
								showLoader(false);
								flag = true;
								jQuery('.border').remove();
							}

							function showLoader(status) {
								if (status)
									document.getElementById('loader').style.display = 'block';
								else
									document.getElementById('loader').style.display = 'none';
							}

							function upload() {

								//test whether it contains any parameters or os actual url
								if (document.getElementById(id).alt == null
										|| document.getElementById(id).alt === "") {
									alert("You have not selected any photo yet");

								} else {

									showLoader(true);
									jQuery
											.ajax({

												url : 'http://localhost:8080/facebook/start?img='
														+ document
																.getElementById(id).alt,
												//data: myData,
												type : 'GET',
												crossDomain : true,
												dataType : 'jsonp',
												timeout : 8500,
												success : function(res) {
													//console.log("code is = " + res.code);
													showLoader(false);
													alert("Success");
												},

												error : function(data) {
													//console.log('error', data);
													showLoader(false);
													alert("Failure");
												}
											});

								}

							}

						});
		//jquery
	</script>

	<h3>Demo of Facebook Connection</h3>
	<button id="fb-auth" class="button">Login</button>

	<button id="upload" class="button" style="display: none;">
		Upload</button>

	<div id="loader" style="display: none">
		<img src="pleasewait.gif" alt="Loading..." />
	</div>

	<div id="user-info"></div>

	<div id="photos"></div>

	<noscript>Your browser is not supporting javascript at the
		moment</noscript>

</body>
</html>